<template>
	<view>
		<view class="bigBox" v-for="(item,index) in list" :key="index">
			<view class="check" v-if="!item.selected" @click="selsctde(true,item.id)">

			</view>
			<view class="check2" v-else @click="selsctde(false,item.id)">
				<image src="@/static/images/icon/chekc.png"></image>
			</view>
			<view class="rightList">
				<view class="listBox">
					<view class="listImg">
						<image :src="item.specs.picUrl"></image>
					</view>
					<view class="listCont">
						<view class="contTitle">
							{{item.goods.name}}
						</view>
						<view class="contIntro">
							已选：{{item.specs.name}}
						</view>
						<view class="listPrice">
							<view class="price" v-if="item.specs.levelPrice">
								￥{{(item.specs.levelPrice/100).toFixed(2)}}
								<image class="vipIcon" src="../../static/images/index/vip.png"></image>
							</view>
							<view class="price" v-else>
								￥{{(item.specs.price/100).toFixed(2)}}
							</view>
							<view class="number">
								<view slot="minus" class="minus"
									@click="changeNumber(item.id,1,item.count,item.specs.stock)">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<input slot="input"
									style="width: 70rpx;height: 28rpx;text-align: center;line-height: 28rpx;margin: -5rpx 10rpx 0 10rpx;"
									v-model="item.count" @change="numberChange(item.id,item.count,item.specs.stock)"
									type="number" />
								<view slot="plus" class="plus"
									@click="changeNumber(item.id,2,item.count,item.specs.stock)">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="botton">
			<view class="bottonCont">
				<view class="botContOne">
					<view class="check" v-if="checkShow2" @click="changeAll(true)">

					</view>
					<view class="check2" v-else @click="changeAll(false)">
						<image src="@/static/images/icon/chekc.png"></image>
					</view>
					<view class="oneText">
						共计({{checkdeNumber}})瓶
					</view>
				</view>
				<view class="botContTow">
					<text>合计:</text><text style="color: #E84E22;font-size: 20rpx;">￥</text><text
						style="color: #E84E22;">{{(tatolPrice/100).toFixed(2)}}</text>
				</view>
				<button class="botContTre" @click="enter">
					结算
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCartList,
		changeSele,
		changeNumber,
		del,
		createOrder,
		paySubmit,
		getAddress
	} from "@/api/wine/wine.js"
	import {
		weixinPay
	} from "@/api/weixinPay/weixinPay.js"
	export default {
		data() {
			return {
				checkShow: false,
				checkShow2: false,
				list: [],
				tatolPrice: 0, //总价
				customerId: '', //商户id
				deskNum: '', //桌号
				type: 1, //购物车类型
				checkdeNumber: 0,
			}
		},
		onLoad(e) {
			if (e.type == 'true') {
				this.type = 2
			} else {
				this.deskNum = uni.getStorageSync('deskNum')
				this.customerId = uni.getStorageSync('customerId')
			}
			this.getList()
		},
		methods: {
			isNumber(value) {
				// 使用正则表达式校验是否是数字
				return /^[+-]?\d+(\.\d+)?$/.test(value);
			},
			isInteger(value) {
				// 使用正则表达式校验是否是整数
				return /^[+-]?\d+$/.test(value);
			},
			//数量判断事件
			numberChange(e, count, stock) {
				let that = this
				let data = {
					id: e,
					count: count
				}
				// console.log('444')
				if (!this.isNumber(count)) {
					const cleanedValue = count.replace(/[^\d]/g, "");
					if (cleanedValue === "") {
						count = 1;
						uni.$u.toast('输入无效，已设置为1')
					}else{
						uni.$u.toast('只能是数字')
						count = cleanedValue
					}
					data.count = count
				}
				if (!this.isInteger(count)) {
					uni.$u.toast('只能是整数')
					data.count = Math.floor(count);
				}
				if (count < 1) {
					uni.$u.toast('请输入大于0的数')
					data.count = 1
				}
				if (count > stock) {
					uni.$u.toast('数量不能大于库存')
					data.count = stock
				}
				setTimeout(() => {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					changeNumber(data).then(response => {
						if (response.code == 0) {
							uni.hideLoading()
							that.getList()
						}
					})
				}, 500)
			},
			//创建订单发起支付
			enter() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const items = that.list.filter(item => item.selected).map(item => ({
					specsId: item.specs.id,
					count: item.count,
					cartId: item.id
				}));
				if (!items.length) {
					uni.$u.toast('请选择结算商品')
					return false
				}
				if (this.type == 2) {
					const goods = that.list.filter(item => item.selected).map(item => ({
						...item
					}));
					this.$tab.navigateTo('/pagesA/confirmOrder/confirmOrder?items=' + encodeURIComponent(JSON.stringify(
						items)) + '&goods=' + encodeURIComponent(JSON.stringify(goods)))
					return false
				}
				if (!that.deskNum) {
					uni.$u.toast('请扫码进入')
					// console.log('openid',uni.getStorageSync('openid'))
					return false
				}
				if (!that.customerId) {
					uni.$u.toast('请扫码进入')
					// console.log('openid',uni.getStorageSync('openid'))
					return false
				}

				if (!items.length) {
					uni.$u.toast('请选择商品')
					// console.log('openid',uni.getStorageSync('openid'))
					return false
				}
				let data = {
					items: items,
					type: that.type,
					//TODO 桌牌号
					deskNum: that.deskNum,
					//TODO 客户id
					customerId: that.customerId
				}
				createOrder(data).then(response => {
					if (response.code == 0) {
						let data2 = {
							id: response.data.payOrderId,
							channelCode: "wx_lite",
							channelExtras: {
								openid: uni.getStorageSync('openid')
							}
						}
						paySubmit(data2).then(response2 => {
							if (response2.code == 0) {
								let payData = JSON.parse(response2.data.displayContent)
								weixinPay(payData).then(response3 => {
									uni.hideLoading()
									uni.$u.toast('支付成功')
									setTimeout(() => {
										that.$tab.switchTab('/pages/mine/index')
									}, 1000)
								})
							}
						})
					}
				})
			},
			//数量为0删除该项
			del(id) {
				let that = this
				let ids = []
				ids.push(id)
				del(ids).then(response => {
					if (response.code == 0) {
						uni.hideLoading()
						that.getList()
					}
				})
			},
			//修改数量
			changeNumber(id, type, number, stock) {
				let that = this
				let count = 0
				let data = {
					id: id,
					count: count
				}
				if (type == 1) {
					count = number - 1
				} else {
					count = number + 1
				}
				if (count >= stock) {
					uni.showToast({
						title: '不能超过最大库存',
						icon: 'none'
					})
					count = stock
				}
				if (number == 1 && type == 1) {
					that.del(id)
					return false
				}
				data.count = count
				setTimeout(() => {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					changeNumber(data).then(response => {
						if (response.code == 0) {
							uni.hideLoading()
							that.getList()
						}
					})
				}, 500)
			},
			//更新选中状态
			selsctde(e, id) {
				let that = this
				let ids = []
				ids.push(id)
				let data = {
					ids: ids,
					selected: e
				}
				// console.log(data)
				changeSele(data).then(response => {
					if (response.code == 0) {
						that.getList()
					}
				})
			},
			//懒得合并成一个函数了，这里是全选的改变状态
			changeAll(e) {
				let that = this
				let ids = that.list.map(item => item.id);
				if (ids.length) {
					let data = {
						ids: ids,
						selected: e
					}
					changeSele(data).then(response => {
						if (response.code == 0) {
							that.getList()
						}
					})
				} else {
					uni.$u.toast('快去添加商品吧')
				}
			},
			//判断是否全部勾选并计算价格的函数
			heldeData() {
				let flage = true; // 假设所有项都选中
				let totalPrice = 0; // 初始化总价格
				let checkedNumber = 0
				this.list.forEach(item => {
					if (!item.selected) {
						flage = false; // 如果有一项未选中，设置 checkShow2 为 false
					} else {
						if (item.specs.levelPrice) {
							totalPrice += item.specs.levelPrice * item.count; // 计算选中项的价格总和
						} else {
							totalPrice += item.specs.price * item.count; // 计算选中项的价格总和
						}
						checkedNumber += item.count * item.specs.packageCount
					}
				});
				this.checkShow2 = !flage
				this.tatolPrice = totalPrice
				this.checkdeNumber = checkedNumber
				// console.log(this.checkShow2)
			},
			//获取数据
			getList() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					customerId: that.customerId,
					type: that.type
				}
				//TODO 客户id是写死的
				getCartList(data).then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						that.list = response.data.validList
						that.heldeData()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.bigBox {
		width: 700rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx auto;
	}

	.rightList {
		width: 642rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(133, 32, 32, 0.16);
		overflow: hidden;
		background-color: white;
	}

	.check {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		// background-color: #E84E22;
		color: white;
		text-align: center;
		line-height: 28rpx;
		border: 1px solid #666;
	}

	.check2 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background-color: white;
		color: white;
		text-align: center;
		line-height: 28rpx;
		overflow: hidden;
	}

	.check2 image {
		width: 100%;
		height: 100%;
	}

	.listBox {
		width: 582rpx;
		height: 156rpx;
		margin: 22rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.listImg {
		width: 156rpx;
		height: 156rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.listImg image {
		width: 100%;
		height: 100%;
	}

	.listCont {
		width: 382rpx;
		height: 156rpx;
	}

	.contTitle {
		width: 382rpx;
		height: 40rpx;
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.contIntro {
		width: 382rpx;
		height: 68rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.listPrice {
		width: 382rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.price {
		width: 170rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 36rpx;
		color: #E84E22;
		display: flex;
		align-items: center;
	}

	.number {
		max-width: 150rpx;
		height: 30rpx;
		display: flex;
		justify-content: space-around;
	}

	// 数量
	.minus {
		width: 28rpx;
		height: 28rpx;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 28rpx;
		height: 28rpx;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	// 底部
	.botton {
		width: 750rpx;
		height: 176rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
	}

	.bottonCont {
		width: 690rpx;
		height: 126rpx;
		margin: 0 auto;
		line-height: 126rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.botContOne {
		width: 180rpx;
		height: 126rpx;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
	}

	.oneText {
		height: 34rpx;
		line-height: 34rpx;
		margin-left: 10rpx;
	}

	.botContTow {
		width: 300rpx;
		height: 126rpx;
		font-size: 28rpx;
	}

	.botContTre {
		width: 180rpx;
		height: 64rpx;
		background: #E84E22;
		border-radius: 44rpx;
		color: white;
		text-align: center;
		line-height: 64rpx;
	}

	.vipIcon {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
</style>